<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐工厂小练习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<!-- 10分钟  完成搜索案例 -->
		<div id="app">
			搜索：<input type="text" v-model="searchValue">
			<h2>2002年华语乐坛排行榜</h2>
			<ul>
				<li v-for="item in searchList" :key="item.id">
					排行:{{ item.id }} 歌曲: {{ item.name }} 歌手: {{ item.sname }}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					searchValue:'',//搜索内容
					musicList:[],//音乐数据
					searchList:[]//搜索结果
				}
			})
			//另外的赋值方法
			vm.musicList = [
			        {id:'1', name:'想唱就唱',sname:'张含韶'}
			        ,{id:'2', name:'冰点与沸点',sname:'张含韶'}
			        ,{id:'3', name:'夕阳无限好',sname:'陈奕迅'}
			        ,{id:'4', name:'爱的证明',sname:'沈建祥'}
			        ,{id:'5', name:'刻下纹身之后' ,sname:'小鸣'}
			        ,{id:'6', name:'双面人' ,sname:'伍佰'}
			        ,{id:'7', name:'长情' ,sname:'黎明'}
			        ,{id:'8', name:'我得你' ,sname:'张学友'}
			        ,{id:'9', name:'人人望放假' ,sname:'张学友'}
			        ,{id:'10', name:'太平洋的风' ,sname:'胡德夫'}
			        ,{id:'11', name:'吻下留人' ,sname:'许志安'}
			        ,{id:'12', name:'顺时针' ,sname:'梁咏琪'}
			        ,{id:'13', name:'回来我的爱' ,sname:'阳一'}
			        ,{id:'14', name:'两只蝴蝶' ,sname:'庞龙'}
			        ,{id:'15', name:'老鼠爱大米' ,sname:'杨臣刚'}
			        ,{id:'16', name:'丁香花' ,sname:'唐磊'}
			        ,{id:'17', name:'爱你' ,sname:'冷草莓'}
			        ,{id:'18', name:'美梦成真' ,sname:'冷草莓'}
			        ,{id:'19', name:'老鼠爱大米' ,sname:'huanggm2'}
			        ,{id:'20', name:'谢谢你的爱1999' ,sname:'cznana'}
			        ,{id:'21', name:'老鼠爱大米' ,sname:'英文版'}
			        ,{id:'22', name:'猪之歌' ,sname:'香香'}
			        ,{id:'23', name:'“吻别”英文版' ,sname:'Michael..'}
			        ,{id:'24', name:'别说我的眼泪你无..' ,sname:'东来东往'}
			        ,{id:'25', name:'追杀邱比特' ,sname:'蔡依林'}
			        ,{id:'26', name:'被风吹过的夏天' ,sname:'金莎'}
			        ,{id:'27', name:'你到底爱谁' ,sname:'刘嘉亮'}
			        ,{id:'28', name:'六月的雨' ,sname:'胡歌'}
			        ,{id:'29', name:'酸酸甜甜就是我' ,sname:'张含韵'}
			        ,{id:'30', name:'你好,周杰伦' ,sname:'安又淇'}
			        ,{id:'31', name:'江南' ,sname:'林俊杰'}
			        ,{id:'32', name:'情人' ,sname:'刀郎'}
			        ,{id:'33', name:'两只蝴蝶' ,sname:'庞龙'}
			        ,{id:'34', name:'2002年的第一场雪' ,sname:'刀郎'}
			        ,{id:'35', name:'看我七十二变' ,sname:'蔡依林'}
			        ,{id:'36', name:'恭喜发财' ,sname:'刘德华'}
			        ,{id:'37', name:'童话' ,sname:'光良'}
			        ,{id:'38', name:'寓言' ,sname:'张韶涵'}
			        ,{id:'39', name:'宁夏' ,sname:'梁静茹'}
			        ,{id:'40', name:'断点' ,sname:'张敬轩'}
			        ,{id:'41', name:'快乐崇拜' ,sname:'潘玮柏'}
			        ,{id:'42', name:'一首简单的歌' ,sname:'王力宏'}
			        ,{id:'43', name:'孤单北半球' ,sname:'欧得洋'}
			        ,{id:'44', name:'十年' ,sname:'陈奕迅'}
			        ,{id:'45', name:'男人海洋' ,sname:'周传雄'}
			        ,{id:'46', name:'挥着翅膀的女孩' ,sname:'容祖儿'}
			        ,{id:'47', name:'我们的爱' ,sname:'F.I.R'}
			        ,{id:'48', name:'第一次爱的人' ,sname:'王心凌'}
			      ];
			//动态绑定监视属性
			vm.$watch('searchValue',function(nv){
				//filter会把数据进行循环 为true保留数据 为false移除数据
				this.searchList = this.musicList.filter((p) =>{
					//p 就是每次循环的数据
					//indexOf 如果包含数据返回数据下标 不包含返回-1
					if(p.name.indexOf(nv) !== -1){
						return true;
					}else{
						return false;
					}
				});
			},{
				//初始化就执行一次
				immediate:true
			})
		</script>
	</body>
